<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap轮播插件</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="slidershow" class="carousel slide" data-ride="carousel">
    <!-- 设置图片轮播计数器 -->
    <ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
    </ol>
    <!-- 设置轮播图片 -->
    <div class="carousel-inner">
        <div class="item active">
            <a href="#">
                <img src="images/carousel1.jpg"
                     style=" height:400px;margin:0 auto;">
            </a>
            <div class="carousel-caption">
                <h3>图片标题1</h3>
                <p>描述内容1...</p>
            </div>
        </div>
        <div class="item">
            <a href="#">
                <img src="images/carousel2.jpg"
                     style="height:400px;margin:0 auto;">
            </a>
            <div class="carousel-caption">
                <h3>图片标题2</h3>
                <p>描述内容2...</p>
            </div>
        </div>
        <div class="item">
            <a href="#">
                <img src="images/carousel3.jpg" style="
height:400px;margin:0 auto;">
            </a>
            <div class="carousel-caption">
                <h3>图片标题3</h3>
                <p>描述内容3...</p>
            </div>
        </div>
    </div>
    <!-- 设置轮播图片控制器 -->
    <a class="left carousel-control" href="#slidershow" role="button"
       data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#slidershow" role="button"
       data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
